<template>
	<hx-navbar :is-back="false" title="个人中心"></hx-navbar>
	<view class="user-info">
		<u-avatar :src="userInfo?.avatarUrl" mode="circle" @click="toLogin"></u-avatar>
		<view style="display: flex; flex-direction: column; flex: 1">
			<view class="nick-name" @click="toLogin">
				<view>
					{{ userInfo?.nickName || '登录' }}
				</view>
			</view>
			<view class="u-padding-left-30 u-padding-top-20 u-font-12">
				<text class="user-tag u-margin-left-10"
					@click="toRoute('/pages/promotion/coupon/coupon-list/index')">优惠券{{ userInfo?.couponCount || 0
					}}</text>
			</view>
		</view>
		<view class="user-setting">
			<u-icon name="setting" :size="46" @click="toRoute('/pages/user/user-setting/index')"></u-icon>
		</view>
	</view>
	<view class="grid-container">
		<view class="warp">
			<view class="header">
				<view class="title"> 我的订单 </view>
				<view class="right" @click="toOrder('')"> 查看全部 <u-icon name="arrow-right" :size="22"></u-icon> </view>
			</view>
			<view class="grid">
				<view class="grid-item" v-for="(item, index) in myOrder" :key="index" @click="toOrder(item.status)">
					<u-icon :name="item.icon" custom-prefix="custom-icon" :size="46"></u-icon>
					<view class="grid-dot"
						v-if="orderCountArray && orderCountArray[index + 1] && orderCountArray[index + 1] != 0">
						<view class="grid-dot-text">
							{{ orderCountArray[index + 1] }}
						</view>
					</view>
					<view class="grid-text">{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
	<view class="grid-container">
		<view class="warp">
			<view class="header">
				<view class="title"> 我的服务 </view>
			</view>
			<view class="grid">
				<view class="grid-item" v-for="(item, index) in myService" :key="index" @click="toRoute(item.url)">
					<u-icon :name="item.icon" custom-prefix="custom-icon" :size="46"></u-icon>
					<view class="grid-text">{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
	<view class="u-flex-col u-margin-left-20 u-padding-10">猜你喜欢</view>
	<WaterfallGoods></WaterfallGoods>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { getCount as getOrderCount } from '@/api/order/orderInfo';
import { useUserStore } from '@/stores/user';
import { Local } from '@/utils/storage';
const storesUserStore = useUserStore();
// 引入组件
import WaterfallGoods from '@/components/waterfall-goods/index.vue';
interface MyOrder {
	icon: string;
	name: string;
	status: string;
}
interface MyService {
	icon: string;
	name: string;
	url: string;
}
interface UserInfo {
	avatarUrl: string;
	nickName: string;
	couponCount: number;
}
//定义变量
const orderCountArray = ref([]);
const myOrder = ref<MyOrder[]>([
	{
		icon: 'daifukuan',
		name: '待付款',
		status: '1',
	},
	{
		icon: 'daifahuo',
		name: '待发货',
		status: '2',
	},
	{
		icon: 'daishouhuo',
		name: '待收货',
		status: '3',
	},
	{
		icon: 'daipingjia',
		name: '待评价',
		status: '4',
	},
	{
		icon: 'tuikuan',
		name: '退款/售后',
		status: '5',
	},
]);
const myService = ref<MyService[]>([
	{
		icon: 'shouhuodizhi',
		name: '收货地址',
		url: '/pages/user/address/index',
	},
	{
		icon: 'pingjia',
		name: '我的评价',
		url: '/pages/user/appraise/index',
	},
	{
		icon: 'liulanjilu',
		name: '浏览记录',
		url: '/pages/user/footprint/index',
	},
	{
		icon: 'wodeshoucang',
		name: '我的收藏',
		url: '/pages/user/collect/index',
	},
	{
		icon: 'quan',
		name: '我的优惠券',
		url: '/pages/promotion/coupon/coupon-user/index',
	},

]);
const userInfo = ref<UserInfo>({
	avatarUrl: '',
	nickName: '',
	couponCount: 0,
});
onLoad(() => {
});
onShow(() => {
	if (Local.getToken()) {
		getUser();
		getUserOrderCount();
	}
});
/**
 * 获取用户信息
 */
const getUser = () => {
	//获取用户信息
	storesUserStore.getInfo().then((response: any) => {
		userInfo.value = response.data;
	});
};
/**
 * 查询订单数量
 */
const getUserOrderCount = () => {
	getOrderCount({}).then((response) => {
		orderCountArray.value = response.data;
	});
};
/**
 * 跳转订单页
 * @param status 订单状态
 */
const toOrder = (status: string) => {
	if (status == '5') {
		// 跳转退款售后页面
		uni.$hxRouter.push({url:'/pages/order/order-refunds/refunds-list/index'}, true);
	} else {
		uni.$hxRouter.push({url:'/pages/order/order-list/index?status=' + status}, true);
	}
};
/**
 *  跳转
 * @param url 页面url
 */
const toRoute = (url: string) => {
	uni.$hxRouter.push({url}, true);
};
/**
 * 跳转登录页
 */
const toLogin = () => {
	if (Local.getToken()) {
		return;
	}
	uni.$hxRouter.push({url:'/pages/login/index'});
};
</script>

<style lang="scss">
.user-info {
	background-color: rgb(255, 255, 255);
	display: flex;
	justify-content: space-between;
	padding: 40rpx;

	.nick-name {
		padding-left: 30rpx;
		display: flex;
		align-items: center;
	}

	.user-tag {
		border: 1px solid #f4f4f5;
		border-radius: 50rpx;
		background-color: #f4f4f5;
		padding: 4rpx 8rpx;
	}

	.user-setting {
		display: flex;
		justify-content: flex-end;
	}
}

.grid-container {
	padding: 20rpx;

	.warp {
		background-color: rgb(255, 255, 255);
		padding: 10rpx;
		border-radius: 20rpx;

		.header {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			padding: 0 10rpx;

			.title {
				font-size: 14px;
				color: rgb(60, 60, 60);
			}

			.right {
				font-size: 22rpx;
				color: rgb(200, 200, 200);
			}
		}
	}

	.grid {
		display: flex;
		padding: 20rpx 0;
		flex-wrap: wrap;

		.grid-item {
			padding: 20rpx 0;
			width: 20%;
			display: flex;
			align-items: center;
			flex-direction: column;
			position: relative;

			.grid-text {
				padding-top: 10rpx;
				font-size: 24rpx;
			}

			.grid-dot {
				position: absolute;
				right: 18px;
				width: 16px;
				top: 5px;

				.grid-dot-text {
					border-radius: 15px;
					padding: 1rpx;
					color: #fff;
					text-align: center;
					background-color: red;
					font-size: 18rpx;
				}
			}
		}
	}
}
</style>
